<template>
  <div class="rank-item">
    <div
      class="rank-item-top"
      :style="{
        background:
          'linear-gradient(to right,' + bgColor[0] + ',' + bgColor[1] + ')'
      }"
    >
      <div class="left">
        <div class="left-itemF">
          <i>{{ title[0] }}</i>
        </div>
        <div class="set">
          <div class="left-item">
            <i>{{ title[1] }}</i>
          </div>
          <div class="left-item">
            <i>{{ title[2] }}</i>
          </div>
          <div class="update" v-if="getTime">{{ getTime }}</div>
        </div>
      </div>
      <div class="right">
        <i class="iconfont icon-bofang"></i>
      </div>
    </div>
    <div class="center">
      <el-table class="table" :show-header="false" :data="musicList" stripe>
        <el-table-column>
          <template slot-scope="scope">
            <div :class="scope.$index <= 2 ? 'red' : ''">
              {{ scope.$index + 1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name"></el-table-column>
        <el-table-column prop="artist"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { _getMusicListDetail, _getSongsDetail } from '../../../network/ranklist'
import { formatDate } from '../../../utils/tool'
export default {
  props: {
    rankId: {
      //榜单id
      type: Number,
      default: 0
    },
    bgColor: {
      //榜单背景颜色
      type: Array,
      default: []
    },
    title: {
      //榜单名字数组
      type: Array,
      default: []
    }
  },
  data () {
    return {
      musicListDetail: [],
      musicList: []
    }
  },
  computed: {
    getTime () {
      //更新时间
      if (this.musicListDetail.code == 200) {
        let time = new Date(this.musicListDetail.playlist.updateTime)
        return formatDate(time, 'MM月dd日')
      } else {
        return ''
      }
    }
  },
  mounted () {
    if (this.rankId) {
      //通过榜单id 获取榜单数据
      _getMusicListDetail(this.rankId).then(res => {
        console.log('$$$$$$$$$$$$$44', res)
        this.musicListDetail = res.data

        // 使用musicListDetail 中的playlist.trackIds的前8个请求歌曲详情
        //
        for (let i of this.musicListDetail.playlist.trackIds.slice(0, 8)) {
          console.log(i)
          // 获取歌曲详情
          _getSongsDetail(i.id).then(res => {
            // res--每一个歌曲
            console.log('-----', res)
            //整理出 歌曲详情返回的重要数据
            this.musicList.push({
              id: res.data.songs[0].id,
              name: res.data.songs[0].name,
              album: res.data.songs[0].al.name,
              artist: res.data.songs[0].ar[0].name,
              pic: res.data.songs[0].al.picUrl,
              time: new Date(res.data.songs[0].dt)
            })
          })
        }
        console.log('**********', this.musicList)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.rank-item {
  cursor: pointer;
  width: calc(30%);
  height: 600px;
  margin-right: 25px;
  margin-top: 20px;
  // background: salmon;
  &-top {
    width: 100%;
    height: 100px;
    position: relative;
    .left {
      width: 200px;
      padding: 0 25px;
      display: flex;
      align-items: center;
      padding-top: 10px;
      color: white;
      .left-itemF {
        font-size: 54px;
        margin-right: 10px;
      }
    }
    .set {
      display: flex;
      position: relative;
    }
  }
  .left-item {
    font-size: 26px;
    margin-top: -20px;
  }
  .update {
    position: absolute;
    width: 100px;
    left: 5px;
    top: 15px;
  }
}
.right {
  width: 50px;
  height: 50px;
  position: absolute;
  right: 20px;
  top: 0;
  bottom: 0;
  margin: auto;
  color: #fff;
}
.iconfont {
  font-size: 40px;
}
.red {
  color: red;
}
</style>
